<template>
	<view>
		<scroll-view  scroll-y="true" class="page_scroll"   @scroll="scroll">
			<view class="account_top">
				<view class="con">
					<view class="top">
						<view class="left">
							<view class="p">存入总金额（元）
								<!-- <image src="../../static/images/a_i2.png" mode="widthFix"></image> -->
							</view>
							<view class="b">{{listinfo.totalFee}}</view>
						</view>
						<view class="left left2">
							<view class="p">预计收益（元）</view>
							<view class="b">{{listinfo.predictFee}}</view>
						</view>
					</view>
					<navigator url="/pages/account/addmoney" hover-class="none">
						<view class="btn">继续充值 ></view>
					</navigator>
				</view>
			</view>

			<view class="web_chose" :class="isfu?'chose_fu':''">
				<view class="span" :class="status=='all'?'on':''" @click="ChangeType('all')">全部<view class="em"></view>
				</view>
				<view class="span" :class="status=='10'?'on':''" @click="ChangeType('10')">待支付<view class="em"></view>
				</view>
				<view class="span" :class="status=='20'?'on':''" @click="ChangeType('20')">待确认<view class="em"></view>
				</view>
				<view class="span" :class="status=='30'?'on':''" @click="ChangeType('30')">进行中<view class="em"></view>
				</view>
				<view class="span" :class="status=='40'?'on':''" @click="ChangeType('40')">已赎回<view class="em"></view>
				</view>
			</view>
			<div class="web_chose_con" v-show="isfu"></div>
			<view class="wp">
				<view class="account_list">
					<view class="item" v-for="(item,i) in listinfo.items" :key="i">
						<view class="tit">
							<view class="span">交易编号：{{item.payno}}</view>
							<view class="em hong" v-if="item.status==10&&item.pay_type=='offline'">线下待支付</view>
							<view class="em hong" v-if="item.status==10&&item.pay_type=='wechat'">支付失败</view>
							<view class="em hong" v-if="item.status==20">待确认</view>
							<view class="em hong" v-if="item.status==30">进行中</view>
							<view class="em hong" v-if="item.status==40">已赎回</view>
						</view>
						<view class="info_con">
							<view class="top">
								<view class="li">
									<view class="span">存入金额（元）</view>
									<view class="b">{{item.pay_fee}}</view>
								</view>
								<view class="li">
									<view class="span">年化收益率</view>
									<view class="b">{{item.current.balance/item.pay_fee*100}}%</view>
								</view>
								<view class="li">
									<view class="span">预计收益（元）</view>
									<view class="b">{{item.current.balance}}</view>
								</view>
							</view>

							<view class="bottom">
								<view class="li">
									<view class="span">{{item.current.integral}}</view>
									<view class="b">积分</view>
								</view>
								<view class="li">
									<view class="span" v-if="item.current.start_at">{{item.current.start_at}}</view>
									<view class="span" v-else>---</view>
									<view class="b">生效日期</view>
								</view>
								<view class="li">
									<view class="span" v-if="item.current.end_at">{{item.current.end_at}}</view>
									<view class="span" v-else>---</view>
									<view class="b">到期日期</view>
								</view>
							</view>
						</view>
						<view class="btn_list" v-if="item.status==10&&item.pay_type=='offline'">
							<view class="span lan" @click="UpImg(item.payno)">上传凭证</view>

							<navigator url="/pages/account/paymass" hover-class="none">
								<view class="span lan">账户信息</view>
							</navigator>
							<!-- <view class="span">取消交易</view> -->
						</view>
						<view class="btn_list" v-if="item.status==10&&item.pay_type=='wechat'">
							<view class="span" @click="Delete(item.payno)">删除交易</view>
						</view>

						<view class="btn_list" v-if="item.status==20">
							<navigator :url="'/pages/account/proof?url=' + item.credentials" hover-class="none">
								<view class="span lan">查看凭证</view>
							</navigator>
						</view>

						<view class="btn_list" v-if="item.status==30">
							<view class="span chose" @click="ChangeNew(item.payno,item.current.action)">
								{{item.current.action=='renew'?'到期续签':'到期赎回'}}
							</view>
							<navigator :url="'/pages/account/history?id=' + item.id" hover-class="none"
								v-if="item.history_count>1">
								<view class="span lan">查看历史</view>
							</navigator>

							<navigator :url="'/pages/account/contract?id=' + item.id" hover-class="none">
								<view class="span lan">查看合同</view>
							</navigator>
						</view>
					</view>
					<view class="web_404" v-if="listinfo.items&&listinfo.items.length==0">
						<image src="../../static/images/none404.png" mode="widthFix"></image>
					</view>
					<!-- 支付失败 -->
					<!-- <view class="item">
					<view class="tit">
						<view class="span">交易编号：202005141440</view>
						<view class="em hong">支付失败</view>
					</view>
					<view class="info_con">
						<view class="top">
							<view class="li">
								<view class="span">存入金额（元）</view>
								<view class="b">2000.00</view>
							</view>
							<view class="li">
								<view class="span">年化收益率</view>
								<view class="b">3%</view>
							</view>
							<view class="li">
								<view class="span">预计收益（元）</view>
								<view class="b">60.00</view>
							</view>
						</view>

						<view class="bottom">
							<view class="li">
								<view class="span">2000</view>
								<view class="b">积分</view>
							</view>
							<view class="li">
								<view class="span">---</view>
								<view class="b">生效日期</view>
							</view>
							<view class="li">
								<view class="span">---</view>
								<view class="b">到期日期</view>
							</view>
						</view>
					</view>
					<view class="btn_list">
						<view class="span">删除</view>
					</view>
				</view> -->

				</view>
			</view>
			<view class="h"></view>

		</scroll-view>

		<view id="fen_pop" v-if="ispop">
			<view class="bg" @click="ispop=false"></view>
			<view class="con">
				<view class="item" :class="ispoptxt=='renew'?'on':''" @click="Mod(1)">
					<view class="pic">
						<text>到期续签</text>
					</view>
				</view>
				<view class="item" :class="ispoptxt=='redeem'?'on':''" @click="Mod(2)">
					<view class="pic">
						<text>到期赎回</text>
					</view>
				</view>
				<view class="item item2" @click="ispop=false">
					<text>取消</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from "../../static/js/common.js"
	export default {
		data() {
			return {
				array: ['到期续签', '到期赎回'],
				index: 1,
				status: 'all',
				listinfo: [],
				logintype: 0,
				isone: false,
				ispop: false,
				ispoptxt: '',
				ispopid: 0,
				num: 1,
				num2: 1,
				isfu:false,
			}
		},
		onShow() {
			let that = this;
			if (common.GetStorage('byh5token')) {
				that.logintype = that.common.GetStorage('byh5type');
				that.GetList();
			} else {
				uni.reLaunch({
					url: '/pages/login/login',
				})
			}
		},
		methods: {


			scroll(event) {
				if(event.detail.scrollTop>150){
					this.isfu = true;
				}
				else{
					this.isfu = false;
				}
			},


			// 删除订单
			Delete: function(id) {
				let that = this;


				uni.showModal({
					title: '提示',
					content: '确定要删除吗?',
					success: function(res) {
						if (res.confirm) {
							that.common.http('DELETE', 'user/pay/' + id, '', function(res) {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
									duration: 2000
								});
								that.ispop = false;
								setTimeout(function() {
									that.GetList();
								}, 1500);
							});
						} else if (res.cancel) {}
					}
				});


			},



			ChangeNew: function(id, txt) {
				let that = this;
				that.ispoptxt = txt;
				that.ispopid = id;
				that.ispop = true;
			},

			Mod: function(num) {
				let that = this;
				if ((num == 1 && that.ispoptxt == 'redeem') || (num == 2 && that.ispoptxt == 'renew')) {
					that.common.http('POST', 'pay/current/' + that.ispopid, '', function(res) {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 2000
						});
						that.ispop = false;
						setTimeout(function() {
							that.GetList();
						}, 1500);
					});
				}
			},

			UpImg: function(id) {
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						uni.showLoading({
							title: '上传中...',
							mask: true
						});
						console.log(res.tempFilePaths[0]);
						that.common.UploadPic(res.tempFilePaths[0], function(res) {
							var _img = JSON.parse(res).data.path;
							let _data = {
								credentials: _img
							};
							that.common.http('POST', 'user/pay/' + id, _data, function(res) {
								uni.showToast({
									icon: 'none',
									title: '上传成功',
									duration: 2000
								});
								setTimeout(function() {
									that.GetList();
								}, 1500);
							});

						});
					},
					complete: function(res) {

					}
				})
			},

			ChangeType: function(num) {
				let that = this;
				that.status = num;
				that.GetList();
			},

			GetList: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let _data = {
					status: that.status
				}
				that.common.http('GET', 'user/pay', _data, function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.listinfo = res.data;
					if (that.logintype == 2) {
						if (res.data.items.length == 1 && that.status == 'all') {
							if (res.data.items[0].status == 10 || res.data.items[0].status == 20) {
								that.isone = true;
							}
						}
					}

				});
			},
		}
	}
</script>

<style scoped>
	.account_top .btn {
		font-size: 30rpx;
		color: #3484dc;
		background-color: #fff;
		text-align: center;
		margin: 0 26rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50px;
	}

	.account_top {
		background-color: #c9e7ff;
		padding: 0 26rpx;
	}

	.account_top .con {
		background-color: #2884ff;
		background-image: url('@/static/images/a_i1.png');
		background-repeat: no-repeat;
		background-position: 90% 30%;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-size: 200rpx auto;
		padding-bottom: 26rpx;
	}

	.account_top .con .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 46rpx 22rpx;
	}

	.account_top .con .top .left {
		width: 50%;
	}

	.account_top .con .top .left image {
		width: 40rpx;
		vertical-align: middle;
	}

	.account_top .con .top .p {
		font-size: 24rpx;
		color: #fff;
	}

	.account_top .con .top .b {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 16rpx;
	}

	.account_top .con .top .left2 {
		border-left: 1px solid #fff;
		padding-left: 40px;
	}


	.info_con {
		padding: 26rpx;
		background-color: #fff;
	}

	.account_list .top {
		padding: 0 26rpx;
		height: 136rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f7ff;
		border-radius: 8px;
	}

	.account_list .top .span {
		font-size: 22rpx;
		color: #999;
	}

	.account_list .top .b {
		font-size: 38rpx;
		color: #333;
		margin-top: 12rpx;
		font-weight: bold;
	}


	.account_list .bottom {
		padding: 0 26rpx;
		text-align: center;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.account_list .bottom .span {
		font-size: 28rpx;
		color: #333;
	}

	.account_list .bottom .b {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
	}
</style>